<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2021-03-16 09:48:46
 * @LastEditors: gzy 810461372@qq.com
 * @LastEditTime: 2023-09-22 16:14:31
-->
<template>
  <el-card v-if="treeData.length != 0" class="box-card" style="height: 100%">
    <el-row style="height: 100%">
      <el-col :span="2">
        <a-tree
          v-model:selectedKeys="boundaryConditionTreeData.treeSelectStcd"
          :tree-data="treeData"
          showIcon
          @select="treeChange"
        />
      </el-col>

      <el-col :span="22" style="height: 100%">
        <!-- 流量泥沙站 -->
        <div style="height: 95%">
          <div style="height: 49%; padding: 10px">
            <BoundaryEcharts
              :treeData="boundaryConditionTreeData.treeData"
              :treeSelectStcd="boundaryConditionTreeData.treeSelectStcd"
              :elementId="'top-echarts'"
              :dataType="'ll'"
            />
          </div>
          <el-divider style="margin: 5px 0px" />
          <div style="height: 49%; padding: 10px">
            <BoundaryEcharts
              :treeData="boundaryConditionTreeData.treeData"
              :treeSelectStcd="boundaryConditionTreeData.treeSelectStcd"
              :elementId="'bottom-echarts'"
              :dataType="'ns'"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts">
import {
  ref,
  defineComponent,
  reactive,
  provide,
  inject,
  watch,
  toRefs,
  onMounted,
  getCurrentInstance,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import moment, { Moment } from "moment";
import * as echarts from "echarts";

import {
  getCalculateBoundary,
  getReadBoundary,
  getCjCalculateBoundary,
} from "@/request/api";
import BoundaryEcharts from "./boundaryEcharts.vue";
import SchemePreset from "./schemePreset.vue";

export default defineComponent({
  name: "boundaryCondition",
  components: {
    BoundaryEcharts,
    SchemePreset,
  },
  setup: (props) => {
    const route = useRoute();
    const { proxy }: any = getCurrentInstance();

    const state = reactive({
      // 边界条件的树状图数据
      treeData: [],
    });

    // 边界条件数据
    let boundaryConditionData: any = inject("boundaryConditionData");

    // 边界条件站点树状图数据
    let boundaryConditionTreeData: any = inject("boundaryConditionTreeData");

    // 方案参数信息
    const planDataMsgForm: any = inject("planDataMsgForm");

    onMounted(() => {
      getBoundaryConditionData();
    });

    watch(
      () => planDataMsgForm,
      (value, prevCount) => {
        proxy.throttle("boundaryCondition", () => {
          // getBoundaryConditionData();
        });
      },
      { deep: true }
    );

    /**
     * @description: 站点树切换
     * @param {*} checkedKeys
     * @param {*} node
     * @return {*}
     */
    function treeChange(checkedKeys, { node }) {
      if (checkedKeys.length != 0) {
        const treeData = boundaryConditionTreeData.treeData.find(
          (item) => item.key === checkedKeys[0]
        );

        boundaryConditionTreeData.treeSelect = treeData;
      } else {
        boundaryConditionTreeData.treeSelectStcd = [
          boundaryConditionTreeData.treeSelect.key,
        ];
      }

      const key = boundaryConditionTreeData.treeSelect.key;
    }

    /**
     * @description: 获取边界数据
     * @return {*}
     */
    function getBoundaryConditionData() {
      // 原有边界数据置空
      for (const key in boundaryConditionData) {
        delete boundaryConditionData[key];
      }

      let obj = {
        area: planDataMsgForm.selectReservoir,
        startTime: moment(planDataMsgForm.dateTime[0]).format(
          "YYYY-MM-DD 00:00:00"
        ),
        endTime: moment(planDataMsgForm.dateTime[1]).format(
          "YYYY-MM-DD 23:59:59"
        ),
        predictDay: planDataMsgForm.predictDay,
        type: "泥沙",
        state: "bu",
        typeZB: false,
        planno: "modeltemp",
      };

      if (planDataMsgForm.selectReservoir != "长江中下游") {
        if (route.params.isEdit != "true") {
          getCalculateBoundary(obj).then((res: any) => {
            // 处理后台数据转化成便于使用的形式
            processBoundaryData(res);
          });
        } else {
          obj.planno = planDataMsgForm.planno;
          getReadBoundary(obj).then((res: Object) => {
            processBoundaryData(res);
          });
        }
      } else {
        if (route.params.isEdit != "true") {
          getCjCalculateBoundary({
            area: "长江中下游",
            startTime: moment(planDataMsgForm.dateTime[0]).format(
              "YYYY-MM-DD 00:00:00"
            ),
            endTime: moment(planDataMsgForm.dateTime[1]).format(
              "YYYY-MM-DD 23:59:59"
            ),
            predictDay: planDataMsgForm.predictDay,
            type: "泥沙",
          }).then((res: any) => {
            // 处理后台数据转化成便于使用的形式
            processBoundaryData(res.data);
          });
        } else {
          obj.planno = planDataMsgForm.planno;
          getReadBoundary(obj).then((res: Object) => {
            processBoundaryData(res);
          });
        }
      }
    }

    /**
     * @description: 将后台boundary数据处理
     * @param {*} boundaryData
     * @return {*}
     */
    async function processBoundaryData(boundaryData) {
      boundaryConditionTreeData.treeData = boundaryData.treeData;
      boundaryConditionTreeData.treeSelect = boundaryData.treeData[0];
      boundaryConditionTreeData.treeSelectStcd = [boundaryData.treeData[0].key];

      for (const key in boundaryData) {
        if (key != "stnmMap" && key != "treeData") {
          for (const dataKey in boundaryData[key]) {
            if (!boundaryConditionData[dataKey]) {
              boundaryConditionData[dataKey] = {};
            }
            boundaryConditionData[dataKey][key] = boundaryData[key][dataKey];

            if (planDataMsgForm.predictDay == 0) {
              delete boundaryConditionData[dataKey][key].yb;
            }
          }
        }
      }

      state.treeData = boundaryData.treeData.filter(
        (item) => item.type != "ZS"
      );
    }

    return {
      ...toRefs(state),

      planDataMsgForm,

      boundaryConditionData,

      boundaryConditionTreeData,

      treeChange,
    };
  },
});
</script>

<style scoped lang="less"></style>
